<template>
	<view class="car">
		<view class="shopList" v-if='shopList.length'>
			<view class="shopOne dFlex jStart_aCenter" @click='controlChoose(item)' v-for="(item,index) in shopList" :key='item.id'>
				<view class="shopChoose imgPublic">
					<image v-if='!item.choose' src="../static/images/wxz@2x.png" mode="widthFix"></image>
					<image v-if='item.choose' src="../static/images/dg@2x.png" mode="widthFix"></image>
				</view>
				<view class="shop dFlex jStart_aStart">
					<view class="shopImg imgPublic">
						<image :src='item.main_img' mode='widthFix'></image>
						<view class="wh imgPublic dFlex jCenter_aCenter" v-if='item.stock <= 0'>
							<image src="../static/images/wh@2x.png" mode="widthFix"></image>
						</view>
					</view>
					<view class="shopInfo">
						<view class="nameAndDel dFlex jBetween_aCenter">
							<view class="shopName">{{item.goods_title}}测试测试测试测试测试测试测试测试测试</view>
							<u-icon name="trash" color='#f56c6c' @click.stop='delShopOne(item)'></u-icon>
						</view>
						<view class='config' @click.stop='chooseSpec(item)'>{{item.attr_name?item.attr_name:'默认规格'}}</view>
						<view class="price dFlex jBetween_aCenter">
							<view class="showPrice">￥{{item.price}}</view>
							<u-number-box v-if='item.stock > 0' :min="1" size='small' :positive-integer='true' @change='changeNum($event,item)' v-model="item.num" :input-width="40" :input-height="40" :size='10'></u-number-box>
							<view v-else style="font-size: 12px;color:#f56c6c;">该商品库存不足</view>
						</view>
					</view>
				</view>
				<!-- <view class="noBuy" v-if='item.stock <= 0' @click.stop=''></view> -->
			</view>
		</view>
		<u-empty mode="list" v-else icon="http://cdn.uviewui.com/uview/empty/car.png" text='暂无数据'></u-empty>
		<view class="total dFlex jBetween_aCenter">
			<view class="chooseStatus dFlex jStart_aCenter">
				<view class="chooseIcon imgPublic" @click="controlAllChoose">
					<image v-if='!allChoose' src="../static/images/wxz@2x.png" mode="widthFix"></image>
					<image v-if='allChoose' src="../static/images/dg@2x.png" mode="widthFix"></image>
				</view>
				<text @click="controlAllChoose">全选</text>
				<text style='color:#fa3534;display: inline-block;margin-left: 12px;' @click="delChooseShop">删除</text>
			</view>
			<view class="allPrice dFlex jEnd_aCenter">
				<view class="showCount">合计：￥<text>{{allPrice?allPrice:'0.00'}}</text></view>
				<view class="payBtn" @click="settlement">结算</view>
			</view>
		</view>
		<!-- 规格弹窗 -->
		<view class="zz dFlex flexDirection jEnd_aCenter" v-if='specsFlag' @click='specsFlag = false'>
			<view class="specsContent" slot='default'>
				<view class="shopInfo dFlex jStart_aStart">
					<view class="shopImg imgPublic">
						<image :src="shop.main_img" mode="widthFix"></image>
					</view>
					<view class="info">
						<view class="shopName">{{shop.title}}</view>
						<view class="base dFlex jBetween_aCenter">
							<view class="price">￥<text>{{showPrice?showPrice:'0.00'}}</text></view>
							<!-- <view class='inventory'>库存：10件</view> -->
						</view>
						<view class="specs" v-if='selSpecStr'>已选：{{selSpecStr}}</view>
					</view>
				</view>
				<view class="specsList">
					<view class="specsOne" v-for="(item,index) in spec" :key='index'>
						<view class="specsTit">{{item.name}}</view>
						<view class="list" v-if="item.arr.length">
							<view :class="['specs_one',selSpec[index].id == item2.id?'active':'']" @tap.stop='selSpecOne(index,index2)' v-for="(item2,index2) in item.arr" :key='index2'>{{item2.name}}</view>
						</view>
					</view>
				</view>
				<view class="sunBtn" @click="operateBtn">确 定</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		cartGoodsList,delShoppingCartGoods,chgShoppingCart,getGoodsDetail
	} from '@/tools/http.js';
	import tools from '@/tools/tools.js'
	export default {
		data() {
			return {
				shopList:[],
				allChoose:false,
				allPrice:0,
				
				noBuyCount:0,//不能购买的产品
				specShop:{}, //修改规格的商品
				// 规格
				specsFlag:false,
				shop:{},
				showPrice:0,
				selSpecStr:"",
				selSpec:[],
				spec:[],
				
			};
		},
		onShow(){
			this.allChoose = false;
			this.allPrice = 0;
			if(uni.getStorageSync('uToken')){
				this.initCarList();
			}
		},
		onShareAppMessage() {
			return{
				title:'甄选好物等你来选购',
				path:'/pages/index',
				imageUrl:'',
				desc:'手机下单 | 足不出户 | 快速直达 | 邮寄到家',
			}
		},
		onShareTimeline() {
			return{
				title:'甄选好物等你来选购',
				path:'/pages/index',
				imageUrl:'',
				desc:'手机下单 | 足不出户 | 快速直达 | 邮寄到家',
			}
		},
		methods:{
			// 购物车列表
			async initCarList(){
				let res = await cartGoodsList();
				if(res && res.length){
					this.shopList = res.map((item)=>{
						return {
							...item,
							choose:false,
						}
					})
				}else{
					this.shopList = [];
				}
			},
			// 单选商品
			controlChoose(shop){
				if(shop.stock > 0){
					shop.choose = !shop.choose;
					let count = 0;
					this.shopList.map((item)=>{
						if(item.choose){
							count ++;
						}
					})
					if(count == this.shopList.length){
						this.allChoose = true;
					}else{
						this.allChoose = false;
					}
					this.calcPrice();
				}
			},
			// 全选
			controlAllChoose(){
				this.allChoose = !this.allChoose;
				if(this.allChoose){
					this.shopList.map((item)=>{
						if(item.stock > 0){
							item.choose = true;
						}
					})
				}else{
					this.shopList.map((item)=>{
						if(item.stock > 0){
							item.choose = false;
						}
					})
				}
				this.calcPrice();
			},
			// 计算选中商品的总价
			calcPrice(){
				this.allPrice = 0;
				this.shopList.map((item)=>{
					if(item.choose){
						let price = item.price * item.num;
						this.allPrice = this.allPrice + price;
					}
				})
			},
			// 去结算
			settlement(){
				let selId = [];
				this.noBuyCount = 0;
				this.shopList.forEach((item,index)=>{
					if(item.choose){
						if(item.stock <= 0){
							this.noBuyCount ++;
						}
						selId.push(item.id);
					}
				})
				if(!selId.length){
					uni.showToast({
						title:'请选中需要结算的商品',
						icon:"none"
					})
					return;
				}
				if(this.noBuyCount > 0){
					uni.showToast({
						title:'存在库存不足的商品无法购买',
						icon:'none'
					})
					return;
				}
				uni.navigateTo({
					url:'/index/beforeOrder?status=2&ids='+selId.join(','),
				})
			},
			// 删除单个商品
			delShopOne(shop){
				uni.showModal({
					title:'提示',
					content:'确定将该商品从购物车中删除？',
					success: async(op) => {
						if(op.confirm){
							let res = await delShoppingCartGoods({
								ids:shop.id,
							});
							if(res){
								uni.showToast({
									title:"删除成功",
									icon:"success"
								})
								this.initCarList();
								this.allChoose = false;
								this.allPrice = 0;
							}
						}
					}
				})
			},
			// 删除选中商品
			async delChooseShop(){
				let delShop = [];
				this.shopList.forEach((item)=>{
					if(item.choose){
						delShop.push(item.id);
					}
				})
				if(!delShop.length){
					uni.showToast({
						title:'请选择需要删除的商品',
						icon:"none"
					})
					return;
				}
				let res = await delShoppingCartGoods({
					ids:delShop.join(','),
				});
				if(res){
					this.initCarList();
					this.allChoose = false;
					this.allPrice = 0;
				}
			},
			// 修改数量
			async changeNum(event,line){
				if(event.value != 'NaN' && event.value != NaN){
					let res = await chgShoppingCart({
						id:line.id,
						goods_attr_id:line.goods_attr_id,
						num:event.value,
					});
					if(res){
						this.calcPrice();
					}else{
						line.num = 1;
						this.calcPrice();
					}
				}
			},
			// 查看商品规格
			async chooseSpec(line){
				this.specShop = line;
				if(line.goods_attr_id){
					if(!this.shop.id){
						let res = await getGoodsDetail({
							id:line.goods_id,
						})
						if(res){
							// 规格名称
							let spec_name = res.attr_group.split('_');
							spec_name.map((item,index)=>{
								this.spec.push({
									name:item,
									arr:[],
								})
							})
							// 规格值
							res.attribute_list.map((item,index)=>{
								let item_ids = item.id.split('_');
								let item_name = item.name.split('_');
								item_ids.map((item2,index2)=>{
									let idx = tools.getIdx(this.spec[index2].arr,'id',item2);
									if(idx == -1){
										this.spec[index2].arr.push({
											id:item2,
											name:item_name[index2]
										})
									}
								})
							})
							// for(let i=0;i<this.spec.length;i++){
							// 	this.selSpec.push(this.spec[i].arr[0]);
							// 	this.selSpecStr = i!=this.spec.length-1?this.selSpecStr+this.spec[i].arr[0].name+"_":this.selSpecStr+this.spec[i].arr[0].name;
							// 	this.selSpecId = i!=this.spec.length-1?this.selSpecId+this.spec[i].arr[0].id+"_":this.selSpecId+this.spec[i].arr[0].id;
							// }
							// 选择的规格的价格
							// for(let i=0;i<res.attribute_list.length;i++){
							// 	if(res.attribute_list[i].id == this.selSpecId){
							// 		this.showPrice = res.attribute_list[i].price;
							// 	}
							// }
							this.shop = res;
						}
					}
					this.specsFlag = true;
				}
			},
			// 修改商品规格
			async operateBtn(){
				if(!this.selSpecId){
					uni.showToast({
						title:'请选择商品规格',
						icon:"none"
					})
					return;
				}else{
					let res = await chgShoppingCart({
						id:this.specShop.id,
						goods_attr_id:this.selSpecId,
						num:this.specShop.num,
					});
					if(res){
						this.selSpecId = '';
						this.specShop = {};
						this.selSpecStr = '';
						this.specsFlag = false;
						
						this.allChoose = false;
						this.allPrice = 0;
						this.initCarList();
					}
				}
			},
			// 选择规格
			selSpecOne(idx1,idx2){
				let arr = this.spec[idx1].arr;
				this.selSpec.splice(idx1,1,arr[idx2]);
				// 选择的规格的名称
				this.selSpecStr = '';
				this.selSpecId = '';
				this.selSpec.map((item,index)=>{
					if(index!=this.selSpec.length-1){
						this.selSpecStr = this.selSpecStr + item.name + '_';
						this.selSpecId = this.selSpecId + item.id + '_';
					}else{
						this.selSpecStr = this.selSpecStr + item.name;
						this.selSpecId = this.selSpecId + item.id;
					}
				})
				// 选择的规格的价格
				for(let i=0;i<this.shop.attribute_list.length;i++){
					if(this.shop.attribute_list[i].id == this.selSpecId){
						this.showPrice = this.shop.attribute_list[i].price;
					}
				}
			},
		}
	}
</script>

<style lang="scss">
	.car{
		width:100%;
		padding: 12px;
		box-sizing: border-box;
		.total{
			position: fixed;
			bottom: 0;
			left:0;
			width:100%;
			padding:12px 20px;
			box-sizing: border-box;
			background: white;
			.allPrice{
				flex:1;
				.payBtn{
					width:max-content;
					color:white;
					border-radius: 50px;
					padding: 6px 20px;
					background:#1362C9;
					margin-left: 12px;
				}
				.showCount{
					text{
						font-weight: bold;
						color:#FF0606;
						font-size: 16px;
					}
				}
			}
			.chooseStatus{
				font-size: 12px;
				color:#808080;
				.chooseIcon{
					width:15px;
					height: 15px;
					margin-right: 12px;
				}
			}
		}
		.shopList{
			width:100%;
			background:white;
			border-radius: 8px;
			.shopOne{
				width:100%;
				padding: 14px 10px;
				box-sizing: border-box;
				border-bottom: 1px solid #E6E6E6;
				position:relative;
				.noBuy{
					width:100%;
					height:100%;
					position: absolute;
					top:0;
					left:0;
					background:rgba(255, 255, 255, 0.3);
					z-index:4;
				}
				.shop{
					width:calc(100% - 25px);
					.shopInfo{
						width:calc(100% - 95px);
						.price{
							width:100%;
							.showPrice{
								color:#FF0606;
							}
						}
						.config{
							width:100%;
							font-size:12px;
							margin:5px auto 10px;
							color:#808080;
						}
						.nameAndDel{
							.shopName{
								width:100%;
								overflow:hidden;
								text-overflow: ellipsis;
								white-space:nowrap;
								font-size:16px;
								font-weight:bold;
							}
						}
						
					}
					.shopImg{
						width: 85px;
						height: 85px;
						position: relative;
						margin-right:10px;
						.wh{
							width: 100%;
							height: 100%;
							padding:20px;
							background:rgba(255, 255, 255, 0.3);
							box-sizing: border-box;
							position: absolute;
							top:0;
							left:0;
							z-index:1;
						}
						image{
							border-radius: 4px;
						}
					}
				}
				.shopChoose{
					width: 15px;
					height: 15px;
					margin-right: 10px;
				}
			}
			.shopOne:last-child{
				border: none;
			}
		}
		.zz{
			.specsContent{
				width:100%;
				background: white;
				padding:0 12px;
				box-sizing:border-box;
				border-top-left-radius: 6px;
				border-top-right-radius: 6px;
				.sunBtn{
					width:100%;
					padding: 8px 0;
					text-align: center;
					color:white;
					border-radius: 50px;
					background: linear-gradient(to right,#3e8ef0,#1665d1);
					margin-top: 10px;
				}
				.specsList{
					width:100%;
					margin-top: 12px;
					.specsOne{
						width:100%;
						margin-bottom: 12px;
						.list{
							width:100%;
							.specs_one{
								display: inline-block;
								width:max-content;
								background:#E6E6E6;
								color: #808080;
								font-size:10px;
								border-radius: 50px;
								padding:3px 8px;
								margin-right:8px;
								border: 1px solid #E6E6E6;
							}
							.active{
								color:#1362C9;
								background: #DCE8F7;
								border-color: #1362C9;
							}
						}
						.specsTit{
							width:100%;
							font-size:13px;
							font-weight: bold;
							margin-bottom: 6px;
						}
					}
				}
				.shopInfo{
					width:100%;
					background:white;
					padding:12px 0;
					
					.info{
						width:calc(100% - 102px);
						.base{
							width:100%;
							font-size:12px;
							margin:15px 0 6px;
							.inventory{
								color:#808080;
							}
							.price{
								color:#E32525;
								text{
									font-size: 18px;
									font-weight: bold;
								}
							}
						}
						.shopName{
							width:100%;
							overflow: hidden;
							text-overflow: ellipsis;
							white-space: nowrap;
							font-size: 15px;
							font-weight: bold;
						}
					}
					.shopImg{
						width: 90px;
						max-height: 90px;
						margin-right:12px;
						image{
							border-radius: 2px;
						}
					}
				}
			}
		}
	}
</style>
